<!--  -->
<template>
    <div>
        <div :class="['mask']" v-if="payFlag" @click="$emit('closePay')"  @touchmove.stop.prevent></div>
        <div :class="['pay',payFlag?'active':'']" @touchmove.stop.prevent>
            <div class="padding">
                <div class="tip f-14 f-bold flex justify-between">
                    <span>选择支付方式</span>
                    <span class="close" @click="$emit('closePay')"></span>
                </div>
                <div class="mt-38 flex justify-between aligin-center" @click="paySelected(0)">
                    <span class="alipay"></span>
                    <span class="ml-10 f-14 mr-auto">支付宝(推荐使用)</span>
                    <span :class="[payIndex==0?'pay-selected':'circle']"></span>
                </div>
                <div class="mt-22 flex justify-between aligin-center" @click="paySelected(1)">
                    <span class="wx-pay"></span>
                    <span class="ml-10 f-14 mr-auto">微信支付</span>
                    <span :class="[payIndex==1?'pay-selected':'circle']"></span>
                </div>
                <div class="mt-22 flex justify-between aligin-center" @click="paySelected(2)">
                    <span class="rest"></span>
                    <span class="ml-10 f-14 mr-auto">余额支付</span>
                    <span :class="[payIndex==2?'pay-selected':'circle']"></span>
                </div>
            </div>
            <div
                class="confirm-btn f-18 f-medium flex justify-center aligin-center"
                @click="submit"
            >确定</div>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    payFlag: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true
    }
  },
  data() {
    return {
      payIndex: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    paySelected(index) {
      this.payIndex = index;
    },
    submit() {
      this.$emit("payConfirm",this.payIndex)
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  z-index: 100;
}
.pay {
  position: fixed;
  box-sizing: border-box;
  overflow: hidden;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #fff;
  z-index: 101;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.3s ease;
  .padding {
    padding: 16px 16px 27px;
  }
  .tip {
    align-items: flex-end;
  }
  .close {
    width: 16px;
    height: 16px;
    .bg-image("../../assets/imgs/close-dialog");
    background-size: 100% 100%;
  }
  .alipay {
    width: 22px;
    height: 22px;
    background: url("../assets/imgs/alipay.png");
    background-size: 100% 100%;
  }
  .wx-pay {
    width: 22px;
    height: 22px;
    background: url("../assets/imgs/wx-pay.png");
    background-size: 100% 100%;
  }
  .rest {
    width: 22px;
    height: 22px;
    background: url("../assets/imgs/rest.png");
    background-size: 100% 100%;
  }
  .circle {
    height: 19px;
    width: 19px;
    box-sizing: border-box;
    border: 1px solid rgba(88, 88, 88, 1);
    border-radius: 50%;
  }
  .pay-selected {
    height: 19px;
    width: 19px;
    .bg-image("../../assets/imgs/pay-selected");
    background-size: 100% 100%;
  }
  .confirm-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 49px;
    color: #fff;
    letter-spacing: 1px;
    background: linear-gradient(
      66deg,
      rgba(232, 48, 56, 1),
      rgba(247, 88, 151, 1)
    );
  }
}
.active {
  height: 300px;
}
</style>